<template>
  <!-- 参与人员管理 -->
  <section id="joinMember" class="com-con">
    <div class="con-top">
      <topSelect cType="all" @getData="getData"></topSelect>
      <ul class="btn-list">
        <li>
          <span class="labelTit">部门选择</span>
          <el-select v-model="formInline.department" placeholder="请选择">
            <el-option label="部门一" value="shanghai"></el-option>
            <el-option label="部门二" value="beijing"></el-option>
          </el-select>
        </li>
        <li>
          <span class="labelTit">会议类型</span>
          <el-select v-model="formInline.type" placeholder="请选择">
            <el-option label="会议一" value="shanghai"></el-option>
            <el-option label="会议二" value="beijing"></el-option>
          </el-select>
        </li>
      </ul>
    </div>
    <div class="con-bottom">
      <el-table :data="tableData"
                stripe
                style="width: 100%" v-loading="load">
        <el-table-column prop="name" label="姓名" min-width="50"></el-table-column>
        <el-table-column prop="name" label="照片" min-width="80"></el-table-column>
        <el-table-column prop="address" label="状态"></el-table-column>
        <el-table-column prop="address" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="success" size="mini">添加</el-button>
            <el-button type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </section>
</template>

<script>
  import topSelect from "@common/topSelect" //顶部筛选条件
  export default {
    name: '',
    data() {
      return {
        formInline: {
          user: '',
          region: ''
        },
        tData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
        ],
        tableData:  [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
        ],
        load: false
      }
    },
    methods: {
      getData(params) {
        this.load = true;
        setInterval(() => {
          this.load = false;
          this.tableData = [...this.tData]
        }, 1000)
      }
    },
    components: {
      topSelect
    }
  }
</script>

<style lang="less">
  #joinMember {
    .btn-list {
      float: left;
      li {
        float: left;
        span.labelTit{
          font-size: 14px;
          margin: 0 8px 0 15px;
          color: #606266;
        }
      }
    }
  }
</style>
